<template>
	<view>
		<view class="top-container">
			<!-- 顶部搜索栏部分 -->
			
			<view class="hotel-list-top">
				
				<view class="search-bar">
					<calendar @change="handleChangeForCalendar" :modal="true" :show="showCaledar"></calendar>
					<view class="search-left" @tap="showCaledar = !showCaledar">
						<view class="block live-away">住<br />离</view>
						<view class="block date">
							{{ formattedCheckInDate }}<br />{{ formattedCheckOutDate }}
						</view>
						<view class="block day">
							{{ checkInWeekDay }}<br />{{ checkOutWeekDay }}
						</view>
						
					</view>
					<view class="divider"></view>
					<input class="search-input" type="text" placeholder="请输入搜索内容" v-model="searchText" />
					<image class="clear-icon" src="../../static/地图搜索页面图片/图标/关闭.png" @click="clear"></image>
				</view>
				<view class="map" @click="goToMap">
					<image class="map-icon" src="/static/全局图标/地图图标.png" />
					<view class="map-text">地图</view>
				</view>
			</view>
			<!-- 下拉筛选菜单 -->
			<view>
				<liu-dropdown :menuList="menuList" :dataObj="dataObj" themeColor="#007AFF"
					@change="handleChangeForDropdown"></liu-dropdown>
			</view>
		</view>
		<!-- 民宿展示部分 -->
		<view class="all-hotel-container">
			<!-- 循环遍历民宿数据 -->
			<view class="hotel-container" v-for="(hotel, index) in hotels" :key="index"
				@click="goToHotelDetails(hotel.homestayId)">
				<!-- 民宿图片 -->
				<image class="hotel-image" :src="hotel.pictures"></image>
				<!-- 民宿详细信息 -->
				<view class="hotel-details-container">
					<!-- 名称和特色民宿标签 -->
					<view class="name-tag-container">
						<!-- 名称 -->
						<view class="name">{{ hotel.homestayName }}</view>
						<!-- 特色民宿标签，仅当 featureList 不为空时显示 -->
						<view class="special-tag" v-if="hotel.featuresList && hotel.featuresList.length > 0">特色民宿</view>
					</view>
					<!-- 评分和点评数 -->
					<view class="rating-reviews-box">
						<view class="rating">{{ hotel.score }}分</view>
						<view class="rating-level">{{ getRatingLevel(hotel.score) }}</view>
						<view class="reviews"><span class="blue-text">{{ hotel.num }}</span>条点评</view>
					</view>
					<!-- 标签和价格 -->
					<view class="tags-price-container">
						<!-- 标签，只显示 featuresList 的前两个 -->
						<view class="tags">
							<text class="tag" v-for="(feature, index) in hotel.featuresList.slice(0, 2)" :key="index">
								{{ feature }}
							</text>
						</view>
						<!-- 价格 -->
						<view class="price">
							<view class="price-content">
								<text class="price-number">¥{{ hotel.minPrice }}</text>
								<text class="price-text">起</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="divider"></view>
		<!-- 底部 -->
		<bottom-nav></bottom-nav>
	</view>
</template>

<script>
	import calendar from '../../components/date-picker/date-picker';
	import bottomNav from '../../components/bottom-nav/bottom-nav.vue';
	export default {
		data() {
			return {
				//图片基础前部URL
				baseImageUrl:  'http://localhost:8086/business/common2/download?name=', // 后端图片的基础路径
				//酒店信息
				hotels: [],
				//筛选框信息
				menuList: [{
					id: 1,
					name: '智能排序',
					isMultiple: false, //是否多选
					showType: 3 //下拉框类型(1、2、3、4)
				}, {
					id: 2,
					name: '附近',
					isMultiple: false, //是否多选
					showType: 2 //下拉框类型(1、2、3、4)
				}, {
					id: 3,
					name: '价格/星级',
					isMultiple: true, //是否多选
					showType: 4 //下拉框类型(1、2、3、4)
				}, {
					id: 4,
					name: '筛选',
					isMultiple: true, //是否多选
					showType: 4 //下拉框类型(1、2、3、4)
				}],
				//下拉框数据源
				dataObj: {
					//类型1数据结构
					itemList1: [{
							id: 1,
							name: '距离优先'
						},
						{
							id: 2,
							name: '好评优先'
						},
						{
							id: 3,
							name: '销量优先'
						}
					],
					//类型2数据结构
					itemList2: [{
						id: 1,
						name: '花溪区',
						childs: [{
							id: 1,
							name: '贵州大学'
						}, {
							id: 2,
							name: '十里河滩'
						}, {
							id: 3,
							name: '花溪公园'
						}]
					}, {
						id: 2,
						name: '南明区',
						childs: [{
							id: 1,
							name: '万达广场'
						}, {
							id: 2,
							name: '市政府'
						}]
					}],
					//类型3数据结构
					itemList3: [{
						id: 1,
						name: '星级',
						childs: [{
							id: 1,
							name: '无星级'
						}, {
							id: 2,
							name: '一星级'
						}, {
							id: 3,
							name: '二星级'
						}, {
							id: 4,
							name: '三星级'
						}, {
							id: 5,
							name: '四星级'
						}, {
							id: 6,
							name: '五星级'
						}]
					}, {
						id: 2,
						name: '民宿类型',
						childs: [{
							id: 1,
							name: '特色民宿'
						}, {
							id: 2,
							name: '普通民宿'
						}]
					}],
					//类型4数据结构
					itemList4: [{
						id: 1,
						name: '热门筛选',
						childs: [{
							id: 1,
							name: '4.8分以上'
						}, {
							id: 2,
							name: '免费停车位'
						}, {
							id: 3,
							name: '接送机/站'
						}]
					}, {
						id: 2,
						name: '类型主题',
						childs: [{
							id: 1,
							name: '电竞房'
						}, {
							id: 2,
							name: '钟点房'
						}, {
							id: 3,
							name: '影音房'
						}]
					}]
				},

				// 用于绑定搜索输入框的内容
				searchText: '',
				//日期选择器与显示部分
				showCaledar: false,
				// 添加日期和星期的初始值
				formattedCheckInDate: '04-18',
				formattedCheckOutDate: '04-21',
				checkInWeekDay: '周六',
				checkOutWeekDay: '周二',
				dayCount: 1, // 初始化默认值为1晚
			};
		},
		components: {
			calendar
		},
		onLoad() {
			this.fetchHotelsData();
		},
		onBackPress() {
			if (this.showCaledar !== false) {
				this.showCaledar = false;
				return true;
			}
		},
		// Vue2 options here
		methods: {
			
			goToHotelDetails(hotelId) {
				// 在这里，我们使用了uni-app的页面跳转方法
				uni.navigateTo({
					url: '/pages/hotelDetails/hotelDetails?hotelId=' + hotelId,
					success: function(res) {
						// 页面跳转成功
					},
					fail: function() {
						// 页面跳转失败
						uni.showToast({
							title: '无法打开酒店详情',
							icon: 'none'
						});
					}
				});
			},
			fetchHotelsData() {
				uni.request({
					url: 'http://localhost:8086/business/homestayInfo/homepageRecommendation', // 你的后端API地址
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200 && res.data) {
							// 假设返回的数据格式是数组
							const hotelsWithFullImages = res.data.data.map(hotel => ({
								...hotel,
								pictures: this.baseImageUrl + hotel.pictures
							}));
							this.hotels = hotelsWithFullImages;
						} else {
							// 处理错误情况
							uni.showToast({
								title: '获取数据失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			},
			getRatingLevel(rating) {
				if (rating >= 4.8) {
					return '极好';
				} else if (rating >= 4.5) {
					return '很好';
				} else if (rating >= 4.0) {
					return '好';
				}
				return '一般';
			},
			//底部导航栏跳转
			navigateTo(page) {
				uni.navigateTo({
					url: page,
				});
			},
			//所选择的信息
			handleChangeForDropdown(e) {
				console.log('当前点击的菜单:' + JSON.stringify(e.chooseMenu))
				console.log('所有选择的条件:' + JSON.stringify(e.chooseInfo))
			},
			handleChangeForCalendar({
				choiceDate,
				dayCount
			}) {
				//参数解释
				//1.choiceDate 时间区间（开始时间和结束时间）
				//2.dayCount 共多少晚

				// console.log(choiceDate, dayCount);
				// 根据用户选择更新日期和星期
				this.formattedCheckInDate = choiceDate[0].re.slice(5);
				this.formattedCheckOutDate = choiceDate[1].re.slice(5);
				this.checkInWeekDay = '周' + choiceDate[0].week;
				this.checkOutWeekDay = '周' + choiceDate[1].week;
				// ...其他代码...
				this.dayCount = dayCount; // 更新天数
				console.log('入住从 ' + choiceDate[0].re + ' (星期' + choiceDate[0].week + ')  到 ' + choiceDate[1].re + '(星期' +
					choiceDate[1].week +
					')' + '  共 ' + dayCount + ' 晚 ');
			},
			clear() {
				// 清除搜索内容的逻辑
				this.searchText = ''; // 将搜索输入框的内容设置为空字符串
			},
			goToMap() {
				// 触发地图搜索的方法
				// 你可能需要等待用户选择地址的操作，然后更新address变量
				// 以下是伪代码，你需要根据你的应用逻辑来实现具体的地址选择和更新逻辑
				uni.navigateTo({
					url: '/pages/mapsearch/mapsearch',
					success: (res) => {
						// 这里假设地图搜索页会在某个时候更新全局变量或者调用某个API来获取选中的地址
						// 以下代码需要根据你具体的应用逻辑来实现
						// this.address = getSelectedAddressFromGlobalStateOrApi();
					}
				});
			},
		},
		watch: {
			searchData(news) {
				console.log(news, '监听最新的值')
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import '../../src/assets/scss/民宿列表/search.scss';
	@import '../../src/assets/scss/民宿列表/hotel.scss';
</style>